<template>
  <div class="page-configView">
    <a-tabs
      v-model:activeKey="configState.activeKey"
      :destroyInactiveTabPane="false"
      :tabBarGutter="32"
      :tabBarStyle="{ borderBottom: 'none' }"
      @change="handleChange"
    >
      <a-tab-pane key="1" tab="视频设置" force-render> <VideoConfig ref="videoRef" /></a-tab-pane>
      <a-tab-pane key="2" tab="图集设置" force-render> <AtlasConfig ref="atlasRef" /> </a-tab-pane>
      <a-tab-pane key="3" tab="文章设置" force-render> <ArticleConfig ref="articleRef" /> </a-tab-pane>
      <a-tab-pane key="4" tab="影人设置" force-render> <FilmMakerConfig ref="filmMakerRef" /></a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from 'vue'
import VideoConfig from './components/VideoConfig.vue'
import AtlasConfig from './components/AtlasConfig.vue'
import ArticleConfig from './components/ArticleConfig.vue'
import FilmMakerConfig from './components/FilmMakerConfig.vue'
import { configState } from './state'
import { useRoute } from 'vue-router'
const route = useRoute()
const videoRef = ref()
const atlasRef = ref()
const articleRef = ref()
const filmMakerRef = ref()

const handleChange = (key: string) => {
  console.log('key: ', key)
  switch (key) {
    case '1':
      videoRef.value.getVideo()
      return
    case '2':
      atlasRef.value.getImage()
      return
    case '3':
      articleRef.value.getArticle()
      return
    default:
      filmMakerRef.value.getPerson()
      return
  }
}
watch(
  () => route.name,
  () => {
    configState.activeKey = '1'
  },
  { deep: true }
)
onMounted(() => {
  videoRef.value.getVideo()
})
</script>

<style lang="less" scoped>
.page-configView {
  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #0083ff;
    text-shadow: 0 0 0.25px currentcolor;
  }
  :deep(.ant-tabs-content-holder) {
    padding-bottom: 8px;
  }
  :deep(ant-tabs-nav-wrap) {
    width: auto;
    border-bottom: 1px solid #fff;
  }

  :deep(.ant-tabs-nav) {
    width: 320px;
    margin: 0 0 24px 0;
  }

  :deep(ant-tabs-nav-list) {
    border-bottom: 1px solid #f1f1f1;
  }
}
</style>
